<template>
  <scroll-view
    class="recommend"
    v-if="recommends.length > 0"
    scroll-y
    @scrolltolower="tobottom"
  >
    <view class="recommend_wraper">
      <navigator
        :url="`/pages/home/album/albumDetail?id=${val.target}`"
        class="recommend_item"
        v-for="val in recommends"
        :key="val.id"
      >
        <image :src="val.thumb" mode="widthFix"></image>
      </navigator>
    </view>
    <!--  月份 -->
    <view class="month">
      <view class="month_title">
        <view class="title_info">
          <view class="left_info">
            <text>{{ month.DD }} /</text> {{ month.MM }}月</view
          >
          <view class="left_text">{{ month.title }}</view>
        </view>
        <view class="title_more">更多</view>
      </view>
      <view class="month_content">
        <go-detail
          class="month_item"
          v-for="(val, index) in month.items"
          :key="val.id"
          :list="month.items"
          :index="index"
        >
          <image :src="val.img" mode="aspectFill" />
        </go-detail>
      </view>
    </view>
    <!-- 热门 -->
    <view class="hot">
      <view class="hot_title"><text>热门</text></view>
      <view class="hot_content">
        <go-detail
          class="item"
          v-for="(val, index) in hots"
          :key="val.id"
          :list="hots"
          :index="index"
        >
          <image :src="val.thumb" />
        </go-detail>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import moment from "moment";
import GoDetail from "./GoDetail";
export default {
  name: "",
  components: {
    GoDetail,
  },
  data() {
    return {
      recommends: [],
      month: {},
      hots: [],
      params: {
        limit: 30,
        order: "hot",
        skip: 0,
      },
      //是否还有下一页
      more: true,
    };
  },

  created() {},
  mounted() {
    this.getData();

    uni.setNavigationBarTitle({
      title: "推荐",
    });
  },
  methods: {
    getData() {
      this.$request({
        url: "http://157.122.54.189:9088/image/v3/homepage/vertical",
        data: this.params,
      }).then((res) => {
        var ress = res.data.res;
        //console.log(ress);
        //是否第一次请求
        if (this.recommends.length === 0) {
          this.recommends = ress.homepage[1].items;
          //月份模块
          this.month = ress.homepage[2];
          this.month.MM = moment(this.month.stime).format("MM");
          this.month.DD = moment(this.month.stime).format("DD");
        }
        //推荐模块
        //是否还有下一页数据
        if (ress.vertical.length === 0) {
          this.more = false;
          uni.showToast({
            title: "已全部加载完毕",
          });
          return;
        }

        this.hots.push(...ress.vertical);
      });
    },

    tobottom() {
      if (this.more) {
        this.params.skip += this.params.limit;
        this.getData();
      } else {
        uni.showToast({
          title: "图片全部加载完成",
          mask: false,
          success: (result) => {},
          fail: () => {},
          complete: () => {},
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.recommend {
  height: calc(100vh - 36px);
}
.recommend_wraper {
  display: flex;
  flex-wrap: wrap;
  .recommend_item {
    flex: 50%;
    padding: 8rpx;
  }
}

.month {
  .month_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    .title_info {
      font-size: 32rpx;
      display: flex;
      align-items: center;
      font-weight: 600;
      .left_info {
        color: $uni-color-error;
        text {
          font-size: 40rpx;
        }
      }

      .left_text {
        margin-left: 20rpx;
      }
    }

    .title_more {
      color: $uni-color-error;
    }
  }
}
.month_content {
  display: flex;
  flex-wrap: wrap;
  .month_item {
    flex: 30%;
    padding: 8rpx;
  }
}
.hot {
  .hot_title {
    margin: 10rpx 8rpx;
    text {
      font-size: 30rpx;
      font-weight: 600;
      border-left: 5rpx solid red;
      padding-left: 8rpx;
      color: $uni-color-error;
    }
  }

  .hot_content {
    display: flex;
    flex-wrap: wrap;
    .item {
      flex: 33.33%;
      padding: 8rpx;
      img {
      }
    }
  }
}
</style>
